<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>terminal test - synthetic stack</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <style>
	
	@-webkit-keyframes somethingAppear {
		0% {
			opacity: 0;
			left: -30px;
		}
		100% {
			opacity: 1;
			left: 0;
		}
	}

	* {
		box-sizing: border-box;
	}
	html {
		height: 100%;
	}

	body {
		background: black;
		color: white;
		font-family: arial;
		height: 100%;
		margin: 0;
		padding: 40px 0 0 0;
	}
	
	a {
		color: white;
	}

	body > #clone-div {
		display: none;
	}
	
	#terminal {
		min-width: 600px;
		max-width: 1140px;
		height: 75%;
		min-height: 400px;
		border: 5px solid rgba(255,255,255,0.2);
		margin: 0 auto;
		padding: 25px;
		font-family: monospace;
		font-size: 15px;
	}

	#wrapper {
		height: 100%;
		overflow: hidden;
		position: relative;
	}

	#wrapper:before {
		content: "";
		position: absolute;
		z-index: 2;
		top: 0; bottom: 0;
		left: 0; right: 0;
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
	}

	#terminal .cloned {
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 15px 0 0 0;
		font-size: 20px;
		white-space: nowrap;
		color: rgba(255,255,255,.6);
		
		-webkit-animation-duration: 0.3s;
		-webkit-animation-name: somethingAppear;
		-webkit-animation-timing-function: ease-in-out;
		-webkit-animation-direction: normal;
		
		-webkit-transition: all .2s ease-in-out;
	}

	#terminal .cloned:first-child {
		color: rgba(255,255,255,.85);
	}

	.cloned p {
		margin: 0;
	}

	#add-stuff {
		display: block;
		min-width: 600px;
		max-width: 1140px;
		text-align: center;
		margin: 1px auto 40px;
		background: rgba(255,255,255,0.13);
		padding: 30px 40px;
	}
	
	#other-info {
		padding: 0 40px 50px;
	}
  </style>
  
</head>

<body>

	<div id="terminal">
		
		<div id="wrapper">
			<!-- code goes in here -->

			<div class="cloned">moo goes the cow _</div>
		</div>

	</div>

	<a href="#" id="add-stuff">add a command to terminal log</a>

	<div id="clone-div">
	</div>

	<div id="other-info">
		<h1>page title in here</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>

	</div>


	<script src="jquery-2.0.3.min.js"></script>
	<script src="jquery.stacker.js"></script>
	<script>

		$(document).ready( function() {

			$('.cloned').stacker();

			$(document).on('click' , '#add-stuff' , function(e){
				e.preventDefault();
				var $clone = $('#clone-div').clone().attr('id','').addClass('cloned').prepend(randomFrom(greetings)),
					$wrapper = $('#wrapper');
				$wrapper.prepend($clone);
				$('.cloned').stacker();				
			});

		});


		function randomFrom(arr){
		    var randomIndex = Math.floor(Math.random() * arr.length);
		    return arr[randomIndex];
		}
		var greetings = [
			"Mirëdita!",
			"Ahalan!",
			"Parev!",
			"Nei Ho!",
			"Goddag!",
			"Hallo!",
			"Hello!",
			"Saluton!",
			"Hei!",
			"Guten Tag!",
			"Gia'sou!",
			"Aloha!",
			"Shalom!",
			"Namaste!",
			"Jó napot!",
			"Halló!",
			"Halo!",
			"Aksunai!",
			"Dia dhuit!",
			"Salve!",
			"Ciao!",
			"Kon-nichiwa!",
			"Hola!",
			"Jambo!",
			"Xin chào!",
			"Здра́вствуйте!",
			"Shalom!",
			"salut!",
			"bonjour!",
			"bonsoir!",
			"hej!",
			"Privet!",
			"hi!",
			"Приве́т!",
			"olá!"
		];


	</script>
</body>
</html>


